<template>
	<div class="goods" @click="godetail">
		<img :src="url+data.img" alt="">
		<p>{{data.title}}</p>
		<p>{{data.price}}</p>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance
	} from "vue"
	import {useRouter} from "vue-router"
	
	let {
		proxy: {
			axios,
			url
		}
	} = getCurrentInstance()
	let prop=defineProps(['data'])
	let router=useRouter()
	let godetail=()=>{
		console.log(prop.data.id)
		router.push({path:"/detail",query:{id:prop.data.id}})
	}
</script>

<style scoped lang="scss">
	.goods {
		width: 200px;
         background-color: white;
		 margin: 20px;
		 height: 400px; 
		 overflow: hidden;
		img {
			width: 180px;
			margin: 10px;
			
		}
	}
</style>